<script setup>
import {ref,onMounted} from 'vue'
import * as echarts from 'echarts'   //引入echarts核发模块
import {CountTo} from 'vue3-count-to'
import chinaMap from '../../assets/json/china.json'
const chart = ref()
onMounted(()=>{
    chartIn()
})
function chartIn(){
    // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(chart.value);
      echarts.registerMap('china',chinaMap)

      // 指定图表的配置项和数据
      var option = {
            geo:{
                type:'map',
                map:'china',
                label:{
                        show: true,
                        color:'#fff',
                        fontSize:10
                    },
                    itemStyle:{
                        areaColor:'#5C7BD9',
                        borderColor:'#fff',
                        borderWidth:1
                    },
            },
            series:[
                    {
                name: '实时行驶车辆',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data:[
                    { name:'齐齐哈尔',value: [123.97, 47.33]},
                    { name:'拉萨',value: [91.11, 29.97]},
                    { name:'上海',value: [121.48, 31.22]}
                ],
                symbolSize:20,
                label: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                },
                itemStyle: {
                    color:'#004EFE'
                },
                rippleEffect:{
                    brushType:'stroke',
                    scale:3
                },
                emphasis: {
                    scale: true
                },
                zlevel: 1
                }
            ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
}

</script>
<template>
    <div class="cen-top" style="height: 650px">
        <div class="map-num">
            <div class="title">实时行驶车辆(辆)</div>
            <div class="num">
                <countTo :startVal="0" :endVal="240898" :duration="3000"></countTo>
            </div>
        </div>
        <div ref="chart" style="width: 100%;height:650px;"></div>
    </div>
</template>
<style scoped>

</style>